<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--
<script type="text/javascript">
    // 页面加载时立即执行未登录提示
    if (confirm("您尚未登录，是否前往登录界面？")) {
        // 用户点击确认，跳转到登录页面
        window.location.href = "${pageContext.request.contextPath}/loginForm";
    } else {
        window.location.href = "${pageContext.request.contextPath}/ShoppingCart";
    }
</script>
-->

<head>
  <title>购物界面</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Hogan 模板 -->
  <script id="cart-template" type="text/template">
    <div class="product-box container">
      <div class="img-left">
        <img src="{{url}}" alt="{{name}}" class="img-box">
      </div>
      <div class="product-con">
        <div style="flex: 5;">
          <h2>{{name}}</h2>
          <div class="price-info">
            <span>{{price}}</span>
          </div>
          <br />
          <div class="product-desc">{{description}}</div>
          <div class="price-line"></div>
        </div>
        <div class="price-btn-box">
          <div class="sale-btn">
            <a id="buy1" href="Order.html" class="price-btn price-btn-primary">
              购买
            </a>
          </div>
          <div class="favorite-btn">
            <a href="javascript:void(0)" id="addToCart" class="btn-like btn-gray" data-item="{{id}}">
              加入购物车
            </a>
          </div>
        </div>
      </div>
    </div>
  </script>
  <script type="text/template" id="header-template">
      {{#categoryList}}
      <li class="nav-item">
        <a href="#" class="link" data-settrack="true">
          <span class="text">{{name}}</span>
        </a>
        <div class="item-children">
          <div class="container">
            <ul class="children-list clearfix">
              <!-- 可扩展子分类 -->
            </ul>
          </div>
        </div>
      </li>
      {{/categoryList}}
    </script>
</head>

<body>
  <!-- topBar -->
  <div style="background-color: rgba(255, 234, 175, 0.8) ">
    <div class="header">
      <!-- topBar -->
      <div class="site-topBar">
        <div>
          <label>
            当前在线人数: <span id="onlineCount">1</span>
          </label>
          <div class="topBar-cart">
            <a class="link">
              <i class="fa-solid fa-cart-shopping"></i>
              购物车
            </a>
            <!-- 这里由 JS 动态控制数量 -->
            <span id="topBarItemCount" class="cart-mini-num J_cartNum">（0）</span>
            <span class="cart-mini-num J_cartNum"><a href="myOrder">我的订单</a></span>

            <!-- 购物车内容区域 -->
            <div id="cartContainer" style="display: none;">
              <div id="J_miniCartMenu" class="cart-menu">
                <div class="menu-content">
                  <!-- 商品列表 -->
                  <ul id="J_miniCartList" class="cart-list"></ul>

                  <!-- 空购物车提示 -->
                  <div id="emptyCart" class="msg msg-empty" style="display: none;">
                    购物车中还没有商品，赶紧选购吧！
                  </div>

                  <!-- 总计 -->
                  <div id="J_miniCartListTotal" class="cart-total clearfix">
                    <span class="total">
                      共 <em id="CartListTotalCount">0</em> 件商品
                      <span class="price">
                        <em id="CartListTotalPrice">0</em> 元
                      </span>
                    </span>
                    <a href="./Order.html" class="btn btn-primary btn-cart">结算</a>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div class="topBar-info">
            <!-- 登录后显示 -->
            <div id="loggedInSection" style="display: none;">
              <a href="javascript:void(0)" class="link" id="welcomeUser" onclick="openModal()">欢迎回来！</a>
              <a href="/mainForm?action=logout" class="link" style="margin-left: 20px;">退出登录</a>

              <!-- 编辑个人信息模态框 -->
              <div id="modal" class="modal register-container">
                <div style="opacity: 1">
                  <h2>编辑个人信息</h2>
                  <form id="userEditForm" method="post" action="/mainForm">
                    <span>
                      <label>用户名：
                        <input type="text" placeholder="用户名" name="username" id="username" required>
                      </label>
                    </span><br>
                    <div id="feedback"></div>
                    <span>
                      <label>邮箱：
                        <input type="email" placeholder="邮箱" name="email" id="email" required>
                      </label>
                    </span><br>
                    <span>
                      <label>年龄：
                        <input type="number" placeholder="年龄" name="age" id="age" min="1" required>
                      </label>
                    </span><br>
                    <span>
                      <label>旧密码：
                        <input type="password" placeholder="旧密码" name="OldPassword" required>
                      </label>
                    </span><br>
                    <span>
                      <label>新密码：
                        <input type="password" placeholder="新密码" name="NewPassword" required>
                      </label>
                    </span><br>
                    <input type="submit" value="更改个人信息">
                  </form>
                </div>
              </div>
            </div>

            <!-- 未登录显示 -->
            <div id="notLoggedInSection">
              <a href="./login.html" class="link">登录</a>
              <span class="sep">|</span>
              <a href="/registerForm" data-register="true" class="link">注册</a>
              <span class="sep">|</span>
              <span class="message">
                <a href="#" class="J_needAgreement">消息通知</a>
              </span>
            </div>
          </div>

        </div>
      </div>
      <!-- 中间部分 -->
      <div class="site-header" style="opacity: 0.8; background-color: white">
        <div class="container">
          <!-- Logo -->
          <div class="header-logo">
            <a href="https://www.bilibili.com/bangumi/play/ep453031" title="奶龙动画" class="logo ir"
              style="background: url(/images/Logo.png) no-repeat; background-size: 56px; margin-top: 22px;">
            </a>
          </div>
          <!-- 分类导航 -->
          <div class="header-nav">
            <ul class="nav-list clearfix">
              <!-- 模板填充位置 -->
            </ul>
          </div>
          <!-- 搜索按钮 -->
          <div class="header-search">
            <form class="search-form clearfix">
              <label class="hide">站内搜索</label>
              <label for="search"></label>
              <input type="search" id="search" name="keyword" autocomplete="off" class="search-text" placeholder="奶龙"
                oninput="searchItem()">
              <a class="no-style-msq">
                <button class="search-btn" id="searchButton">
                  <i class="fa-solid fa-magnifying-glass"></i>
                </button>
              </a>
              <div class="search-hot-words"></div>
              <div id="J_keywordList" class="keyword-list">
                <ul class="result-list">
                </ul>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div id="floatingWindow" class="floating">
      <div class="content" th:text="${item.name}"></div>
    </div>

    <div style="background-color: rgba(255, 234, 175, 0.8) ">
      <!-- 页面中填充的位置 -->
      <div id="cart-container"></div>
    </div>
  </div>

  <div class="mouse-follow-icon" id="mouse-follow-icon"
    style="display: inline-flex; align-items: center; justify-content: center;">
    <img src="../images/cursor.gif" alt="跟随鼠标的GIF" />
  </div>

</body>

<script src="https://kit.fontawesome.com/8c320534de.js" crossorigin="anonymous"></script>
<script>
  window.onscroll = function () {
    var floatingWindow = document.getElementById("floatingWindow");
    var windowScrollY = window.scrollY;
    // 获取元素的初始位置
    var initialOffset = floatingWindow.offsetTop; // 初始相对于页面顶部的距离

    // 判断是否需要固定
    if (windowScrollY > initialOffset) {
      floatingWindow.classList.add("fixed");
    } else {
      floatingWindow.classList.remove("fixed");
    }
  };
</script>
<script src="https://kit.fontawesome.com/c3413aee04.js" crossorigin="anonymous"></script>

</html>